<template>
    <div style="padding:0 20px 0 0">
        <el-form ref="queryData" :model="queryData" label-width="60px">
            <el-form-item label="类别:">
                <el-select v-model="queryData.type" placeholder="请选择" @change="getData">
                    <el-option label="所有" value="false"></el-option>
                    <el-option label="放行" value="true"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="text-align:right">
            <el-button type="primary" size="mini" @click="handleCheckAllChange">全选</el-button>
            <el-button type="success" size="mini" @click="fangXing">放行</el-button>
            <el-button type="warning" size="mini" @click="handleDelect">删除</el-button>
        </div>
        <div style="margin-top:30px">
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city.id" :key="city" style="margin-left:30px">{{city.terms}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div style="text-align:right;margin:15px 0;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryData.PageIndex"
                :page-sizes="[70, 80, 90, 100]"
                :page-size="queryData.PageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      queryData: {
        type: "false",
        PageIndex: 1,
        PageSize: 70
      },
      total: 0,
      cities: [],
      checkedCities: [],
      checkAll: false     
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleCheckAllChange() {
      this.checkAll = !this.checkAll;
      if (this.checkAll) {
        for (let i = 0; i < this.cities.length; i++) {
          this.checkedCities.push(this.cities[i].id);
        }
      } else {
        this.checkedCities = [];
      }
    },
    handleCheckedCitiesChange(val) {
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.cities.length;
    },
    getData(){
      this.$api.get("/api/SensitiveWords/GetSensitiveWordsPaged",this.queryData).then(res=>{
        if (res.statusCode == 200) {
          this.cities = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "success"
          });
        }
      })
    },
    //放行敏感词
    fangXing(){
            this.$api.post("/api/SensitiveWords/UpdateIsRelease",
                            {wordIds: this.checkedCities, isrelease: false},true).then(res=>{
        if (res.statusCode == 200) {
          this.getData();
        }else{
          this.$message({
            message: res.msg,
            type: "error"
          });
        }

      })
    },
    //删除
    handleDelect(){
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        type: "warning"
      }).then(_ => {
        this.$api.post("/api/SensitiveWords/DeleteSensitiveWords",
                        {wordIds: this.checkedCities, isDeleted: true},true).then(res=>{
          if (res.data.statusCode == 200) {
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          }
        })  
        this.getData();
      });

    },
    handleSizeChange(val) {
      this.queryData.PageSize = val;
    },
    handleCurrentChange(val) {
      this.queryData.PageIndex = val;
    }
  }
};
</script>

<style scoped>
</style>